-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding new 'args' config #37
Conversation
Adds the ability to pass arguments to the fetcher function - [x] Updated documentation - [x] Added example - [x] Added test
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! I'm only rejecting because we'd like to have a bit more discussion before this is landed.
Namely, we need to add fn
and its args
to the internal dependencies array of the hook.
Secondly, we should figure out and document how to enable the ESLint rule to enable exhaustive deps for this hook.
☝️ to make this work we might need args to be an actual array passed, not part of the options, e.g.
useSWR('token', () => document.cookie(...), [])
useSWR('token', () => document.cookie(...), [], { ...opts })
What we're trying to achieve would be a syntax sugar way of doing this: const fn = useCallback(
key => {
doSomething(key, a, b);
},
[a, b],
);
const { data, error } = useSWR('my-key', fn); (where |
Hi @Timer, I had an offline conversation with @quietshu about this in slack, and we landed on this "API." That being said, if we want to change it up, I'm all ears! I can add the deps, that's an easy change. |
Hm. that changed caused an infinite loop in the tests... |
Updated to the new suggested format: function useSWR<Data = any, Error = any, Fn extends fetcherFn<Data> = fetcherFn<Data>>(key: keyInterface, fn?: Fn, config?: ConfigInterface<Data, Error>): responseInterface<Data, Error>;
function useSWR<Data = any, Error = any, Fn extends fetcherFn<Data> = fetcherFn<Data>>(key: keyInterface, fn?: Fn, deps?: Parameters<Fn>, config?: ConfigInterface<Data, Error>): responseInterface<Data, Error>;
// typeless
function useSWR(key, fn?, config?);
function useSWR(key, fn?, deps?, config?); Still getting an infinite loop... I do have a concern here, in that we can't pass a function that returns deps for this, not allowing: https://swr.now.sh/#dependent-fetching. I'd love to find a way to allow this while still working with the eslint plugin. Any suggestions? e.g. const {data: user} = useSWR('user', api.getUser, [userId]);
const {data} = useSWR(`${userId} tweets`, twitterApi.getTweets, [user.twitterHandle]); // Errors because user is undefined
// Would like to do
const {data} = useSWR(`${userId} tweets`, twitterApi.getTweets, () => [user.twitterHandle]); |
key: keyInterface, | ||
fn?: Function, | ||
fn?: Fn, | ||
deps?: Parameters<Fn>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The react team recommends against having a custom deps
as the lint-rule will not pick these up automatically. https://twitter.com/dan_abramov/status/1140316424898043904 The recommended way is to pass in a function wrapped via useMemo
or useCallback
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
deps
being not the last argument is a very surprising API-design since the deps array is usually the last parameter, at least for the react in-built hooks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isnt a "custom" Misunderstood. We are specifically trying to provide syntactic sugar against using deps
. Its just an array. Parameters
is a typescript type to put the arguments of a function in a tuple.useMemo
or useCallback
, as thats a very unfriendly developer pattern
the eslint plugin for exhaustive deps is expecitng deps
to be immediately after the function. Hands may be tied here for that
I think we should still include deps inside the
|
Co-Authored-By: Shu Ding <ds303077135@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Found some bugs regarding the changes.
I removed fnRef
since fn
is not a dependency (but those args are).
And also, I added depsCompare
to compare 2 arrays (directly using ===
will lead to false
because [ ]
will be a new created object every time when rendering).
Co-Authored-By: Shu Ding <ds303077135@gmail.com>
Adds the ability to pass arguments to the fetcher function
Looking for more examples to show off the possibilities for this